<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/admin' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>轮播图管理</el-breadcrumb-item>
      <el-breadcrumb-item>添加轮播图</el-breadcrumb-item>
    </el-breadcrumb>
    <!--卡片视图-->
    <el-card>
      <el-upload
          action="http://localhost:8080/picture/upload"
          name="picFile"
          :limit="1"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-success="handleSuccess"
          :on-remove="handleRemove">
        <i class="el-icon-plus"></i>
      </el-upload>
      <el-dialog :visible.sync="dialogVisible">
        <img width="100%" :src="dialogImageUrl" alt="">
      </el-dialog>
      <el-button @click="insert()">发布轮播图</el-button>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogImageUrl: '',
      dialogVisible: false,
      banner:{
        url:""
      }
    }
  },
  methods: {
    handleRemove(file, fileList) {
      console.log(file, fileList);
      //当点击删除图片时方法会执行
      //file代表要删除的文件
      //file.response代表文件上传成功时 服务器响应的数据(文件名)
      console.log("文件名="+file.response);
      //http://localhost:8080/remove?name=xxx.jpg
      this.axios.get("/remove?name="+file.response).then(function (response) {
        console.log("服务器图片已经删除")
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    insert(){
      //得到用户输入的微博文本内容和图片名 一起提交给服务器
      if (this.banner.url==""){
        alert("图片不能没有!")
        return;
      }
      let url = "http://localhost:8080/banner/insert"
      this.axios.post(url,this.banner).then(function () {
        alert("添加完成!");
        history.back();
      })
    },
    handleSuccess(response,file,fileList){
      //response=file.response
      console.log("文件上传完成, 图片名="+response);
      this.banner.url = response;
    },
    goBack(){
      //返回上级页面
      history.back();
    }
  }
}
</script>

<style scoped>

</style>